<template>
  <view class="home">
    <!-- 头部 start -->
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      leftBtnShow="true"
      backgroundImage="linear-gradient(#3388FF, #6197f8)"
      :border="false"
      leftIcon="back"
      color="#fff"
      @clickLeft="clickLeft"
    >
       <view class="uni-title">{{title}}</view>
    </uni-nav-bar>
    <!-- 头部 end -->

    <!-- 内容 start -->
    <view class="content" :style="{height: (offsetHeight-offsetTop-10)+'px'}">
      <view class="form-box flex" v-if="des == ''">
        <view class="flex title">处方单号二维码</view>
        <view class="img-box">
          <image mode="aspectFit" :src="src"></image>
        </view>
      </view>
      <view v-else class="form-box flex">
        <view class="flex title">{{des}}</view>
      </view>
    </view>
    <!-- 头部信息 start -->
    <!-- 头部信息 end -->

  </view>
</template>

<script>
import hccmStore from "@/common/hccm-store.js"
import mRequest from "@/api/home"
import hccmConfig from "@/common/hccm-config.js"
export default {
  data() {
    return {
      offsetTop: hccmStore.getOffsetTop(), //安全高度
      offsetHeight:  hccmStore.getOffsetHeight(), //安全高度
      title: '处方二维码',
      des:'处方未支付',
      src: 'https://hccm-1256080859.cos.ap-beijing.myqcloud.com/image/20211231/1640913887630.png'
    }
  },
  onLoad(options) {
    console.log(this.offsetHeight)
    this.getPrescriptionQRcode(options.prescriptionId)
  },
  onShow() {
  },
  methods: { 
    clickLeft(){
      uni.navigateBack()
    },
    getPrescriptionQRcode(prescriptionId){
      mRequest.getPrescriptionQRcode({prescriptionId}).then(res=>{
        if(res.code == 200){
          this.src = `data:image/png;base64,${res.responseData}`
          this.des = ''
        }
      })
    },
  },
}
</script>

<style lang="scss">
@import "@/static/css/index.scss";
// begin
.home {
  height: 100%;
  overflow: hidden;
  .content{
    overflow: auto;
    background-image: linear-gradient(#6197f8, #f5f5f5, #f5f5f5);
    box-sizing: border-box;
    overflow: auto;
    padding-bottom: 220rpx;
    box-sizing: border-box;
    .form-box{
      margin: 30rpx;
      padding: 20rpx;
      background: #fff;
      border-radius: 20rpx;
      padding: 126rpx 0 150rpx;
      flex-direction: column;
      .title{
        color: #000000;
        font-size: 38rpx;
        font-weight: 500;
      }
      .img-box{
        height: 700rpx;
        width: 700rpx;
        border-radius: 16rpx;
        overflow: hidden;
        image{
          height: 700rpx;
          width: 700rpx;
          background-color: #eeeeee;
        }
      }
    }
  }
}
</style>
